<template>
  <div class="box_border c_b_item">
    <div class="item_title">用电量统计（单位:千瓦时）</div>
    <div ref="electricityConsumption" style="width: 100%; height: 260px" />
    <div class="tl-corner"></div>
    <div class="tr-corner"></div>
    <div class="bl-corner"></div>
    <div class="br-corner"></div>
  </div>
</template>
<script>
import ajax from "@/utils/ajax";
import echarts from "echarts";
export default {
  data() {
    return {
      electricityConsumptiondata: [],
    };
  },
  mounted() {
    this.getOrganEnergyUsedStatistics();
  },
  methods: {
    getOrganEnergyUsedStatistics() {
      ajax.get({
        url: this.$API.getOrganEnergyUsedStatistics,

        success: (response) => {
          let self = this;
          self.electricityConsumptiondata = response.data;

          // console.log(self.electricityConsumptiondata);
          this.getElectricityConsumptionChart();
        },
      });
    },
    //用电量统计管理echarts图标
    getElectricityConsumptionChart(data) {
      var _this = this;
      let xAxis_data = [];
      let series_option = [];
      let linseries_option = [
        {
          xAxisIndex: 1,
          type: "line",
          seriesLayoutBy: "row",
          label: {
            show: false,
            position: "top",
          },
          tooltip: {
            trigger: "axis",
            show: false,
            axisPointer: {
              type: "none",
            },
          },
        },
      ];
      let series_optionatty = {};

      series_optionatty.type = "bar";
      series_optionatty.seriesLayoutBy = "row";
      series_optionatty.label = {
        show: true,
        position: "top",
      };
      series_optionatty.data = [];
      for (let item of _this.electricityConsumptiondata) {
        series_optionatty.data.push(item.value);
      }
      series_option.push(series_optionatty);
      for (let itme of linseries_option) {
        series_option.push(itme);
      }
      // console.log(series_option);
      for (let itme of _this.electricityConsumptiondata) {
        xAxis_data.push(itme.time);
      }
      // console.log(xAxis_data);
      const chart = this.$refs.electricityConsumption;
      if (chart) {
        const myChart = echarts.init(chart);
        const option = {
          color: ["#4F7EDD", "#01D3DE"],
          grid: {
            left: "16",
            right: "4%",
            bottom: "3%",
            top: "5%",
            containLabel: true,
          },
          tooltip: {
            trigger: "axis",
            show: true,
            axisPointer: {
              type: "none",
            },
          },

          xAxis: [
            {
              type: "category",
              axisTick: {
                show: false,
              },
              axisLabel: {
                color: "#fff",
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "rgba(220, 220, 220, 0.2)",
                },
              },

              data: xAxis_data,
            },
          ],
          yAxis: {
            show: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(220, 220, 220)",
              },
            },
          },
          series: series_option,
        };
        option.xAxis[1] = {
          type: "value",
          max: option.xAxis[0].data.length * 100,
          show: false,
        };
        option.tooltip[1] = {
          show: false,
        };
        // console.log(option);
        option.series[1].data = series_option[0].data.map((x, i) => [
          50 + i * 100,
          x,
        ]);

        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
        myChart.on("click", function (params) {
          _this.$emit("electricityconsumptionShow", "first");
        });
      }
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
  },
};
function weekday(day) {
  let weekStr = "周" + "一二三四五六日".charAt(day);
  return weekStr;
}
</script>
<style scoped>
* {
  box-sizing: border-box;
}
.item_title {
  height: 50px;
  padding: 15px;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 1px solid rgba(72, 143, 255, 0.2784313725490196);
}
.c_b_select {
  position: relative;
  top: -6px;
}
.tl-corner {
  position: absolute;
  width: 0.1rem;
  height: 0.1rem;
  left: -0.01rem;
  top: -0.01rem;
  border-top: 0.01rem solid #fff;
  border-left: 0.01rem solid #fff;
}
.tr-corner {
  width: 0.1rem;
  height: 0.1rem;
  position: absolute;
  right: -0.01rem;
  top: -0.01rem;
  border-top: 0.01rem solid #fff;
  border-right: 0.01rem solid #fff;
}
.bl-corner {
  width: 0.1rem;
  height: 0.1rem;
  position: absolute;
  left: -0.01rem;
  bottom: -0.01rem;
  border-bottom: 0.01rem solid #fff;
  border-left: 0.01rem solid #fff;
}
.br-corner {
  width: 0.1rem;
  height: 0.1rem;
  position: absolute;
  right: -0.01rem;
  bottom: -0.01rem;
  border-bottom: 0.01rem solid #fff;
  border-right: 0.01rem solid #fff;
}
</style>